<template>
  <div class="container">
    <Category title="美食">
      <!-- 往名字叫center的插槽上放-->
      <img slot="center"
           src="https://img2.baidu.com/it/u=381412217,2118678125&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
           srcset="">
      <!-- 往名字叫footer的插槽上放-->
      <a slot="footer" href="https://www.bilibili.com/">b站</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(item,index) in games" :key="index">{{ item }}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.bilibili.com/">单机游戏</a>
        <a href="https://www.bilibili.com/">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <img slot="center"
           src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Flarge%2F7a82bce9jw1f2826iob2ng20b40687wh.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673517182&t=f8e289260f6315e6d0dfe5ef7f131f4b">
      <!--template的专属写法-->
      <template v-slot:footer>
        <a href="https://www.bilibili.com/">网络电影</a>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>

import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data() {
    return {
      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
      games: ['命运', '明日方舟', '元神', 'apex'],
      films: ['泰坦尼克号', '教父', '警察故事', '拆弹专家']
    };
  }
}
</script>

<style>
.container, .foot {
  display: flex;
  justify-content: space-around;
}
</style>
